window.addEventListener('load', function () {
   // 获取元素
   let total = this.document.querySelector('.total')
   let avgSalary = this.document.querySelector('.avgSalary')
   let avgAge = this.document.querySelector('.avgAge')
   let proportion = this.document.querySelector('.proportion')
   // 一班级信息概览
   // 1:发起ajax请求获取数据，实现动态渲染
   axios({
       url: '/student/overview'
   }).then(res => {
       let data = res.data.data
       total.innerHTML = data.total
       avgSalary.innerHTML = data.avgSalary
       avgAge.innerHTML = data.avgAge
       proportion.innerHTML = data.proportion
   })


    // 为下面的折线图，饼图准备好学员信息的数据
    axios({
        url: '/student/list'
    }).then(res => {
        // console.log(res)
        let data = res.data.data
        let pieArr = []
        // console.log(data)
        // 折线图需求数据：姓名，实际工资，期望工资
        let names = [],
            salarys = [],
            truesalarys = []

        // 收集饼图所需要的数据--数据改造
        // 使用挡墙遍历到的省份名称出去 peiArr中查找，看看是否能够肇东
        // -----------收集饼图数据开始---------
        data.forEach(function (value, index) {
            let result = pieArr.filter(function (v) {
                return v.name == value.province
            })[0]
            // 如果当前遍历到的省份存在，就修改数量+1

            if (result) {
                result.value++
            }

            // 如果当前遍历到的省份不存在，则添加一哥新的对象，且数量为1
            else {
                pieArr.push({
                    name: value.province, value: 1
                })
            }
            // -----------收集饼图数据结束---------
            // -----------收集折线图数据开始---------
            names.push(value.name)
            salarys.push(value.salary)
            truesalarys.push(value.truesalary)
            // -----------收集折线图数据结束---------

        })
        // 根据数据渲染出动态饼图
        drawPie(pieArr)
        // 根据数据渲染出动态折线图
        drawLine(names, salarys, truesalarys)

    })

    // 饼图
    function drawPie(arr) {
        var myChart = echarts.init(document.querySelector('.pie'))
        let option = {
            title: {
                text: '籍贯 HomeTown',
                left: 'left'
            },

            tooltip: {
                trigger: 'item',
                formatter: '{a}<br/>{b}:{c} ({d}%)'
            },

            series: [
                {
                    name: '各地人员分布',
                    type: 'pie',
                    radius: [20, 120],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 6
                    },
                    data: arr
                }
            ]
        }

        myChart.setOption(option)
    }
    // drawPie()

    // 折线图--学员的薪资
    function drawLine(names, salarys, truesalarys) {
        let myChart = echarts.init(document.querySelector('.line'))
        let option = {
            // 标题
            title: {
                text: '薪资Salary'
            },
            // 风格：可以设置图标的大小
            grid: {
                left: '3%',
                right: '2%',
                bottom: '20%',
                containLabel: true
            },

            // 工具提示
            tooltip: {
                trigger: 'axis'
            },

            // 图例，属性值需要series中的数据系列的name属性一致
            legend: {
                data: ['期望薪资', '实际薪资']
            },

            // 数据缩放
            dataZoom: [{
                start: 0,
                end: 100
            }
            ],
            xAxis: {
                type: 'category',
                data: names
            },
            yAxis: {
                type: 'value'
            },
            // 数据系列
            series: [
                {
                    name: '期望薪资',
                    type: 'line',
                    smooth: true,
                    data: salarys,
                    itemStyle: {
                        color: 'yellow'
                    },
                    symbol: 'none'
                },
                {
                    name: '实际薪资',
                    type: 'line',
                    smooth: true,
                    data: truesalarys,
                    itemStyle: {
                        color: 'green'
                    },
                    symbol: 'none'
                },

            ]

        };
        myChart.setOption(option)
    }
    drawLine()

    // 柱状图--学员的成绩
    // 收集成绩数据 GET
     // 按次查询成绩
     function getScore(batch) {
        axios({
            url: '/score/batch',
            params: { batch }
        }).then(res => {
            console.log(res)
          if(res.data.data){
            drawBar(res.data.data)
          }else{
            toastr.warning(res.data.message)
          }

        })
    }
    getScore(1)

    // 柱状图--成绩
    function drawBar(obj) {
        let myChart = echarts.init(document.querySelector('.barChart'))
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            // 网格：可以设置图表大小
            grid: {
                left: '3%',
                right: '2%',
                bottom: '2%',
                top: '12%',
                containLabel: true
            },
            legend: {
                data: ['平均分', '低于60分人数', '60到80分之间', '高于80分人数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: obj.group,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',

                    min: 0,
                    max: 100,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value} 分'
                    }
                },
                {
                    type: 'value',

                    min: 0,
                    max: 10,
                    interval: 1,
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                }
            ],
            series: [
                {
                    name: '平均分',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return 'dd' + value
                        }
                    },
                    data: obj.avgScore
                },
                {
                    name: '低于60分人数',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + 'aa'
                        }
                    },
                    data: obj.lt60,
                    // 指定当前数据系列的Y轴的参照，1代码索引为1的轴，默认左边的轴的索引是0
                    yAxisIndex: 1
                },

                {
                    name: '60到80分之间',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' bb'
                        }
                    },
                    data: obj.gt60,
                    yAxisIndex: 1
                },

                {
                    name: '高于80分人数',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + ' cc'
                        }
                    },
                    data: obj.gt80,
                    yAxisIndex: 1
                }

            ]
        }

        myChart.setOption(option)
    }
    // drawBar()

    
    // 地图
// ----------------------- 地图 ------------------------------
function mapChart() {
    let myChart = echarts.init($('.map')[0]);
  
    var chinaGeoCoordMap = {
      '黑龙江': [127.9688, 45.368],
      '内蒙古': [110.3467, 41.4899],
      "吉林": [125.8154, 44.2584],
      '北京市': [116.4551, 40.2539],
      "辽宁": [123.1238, 42.1216],
      "河北": [114.4995, 38.1006],
      "天津": [117.4219, 39.4189],
      "山西": [112.3352, 37.9413],
      "陕西": [109.1162, 34.2004],
      "甘肃": [103.5901, 36.3043],
      "宁夏": [106.3586, 38.1775],
      "青海": [101.4038, 36.8207],
      "新疆": [87.9236, 43.5883],
      "西藏": [91.11, 29.97],
      "四川": [103.9526, 30.7617],
      "重庆": [108.384366, 30.439702],
      "山东": [117.1582, 36.8701],
      "河南": [113.4668, 34.6234],
      "江苏": [118.8062, 31.9208],
      "安徽": [117.29, 32.0581],
      "湖北": [114.3896, 30.6628],
      "浙江": [119.5313, 29.8773],
      "福建": [119.4543, 25.9222],
      "江西": [116.0046, 28.6633],
      "湖南": [113.0823, 28.2568],
      "贵州": [106.6992, 26.7682],
      "云南": [102.9199, 25.4663],
      "广东": [113.12244, 23.009505],
      "广西": [108.479, 23.1152],
      "海南": [110.3893, 19.8516],
      '上海': [121.4648, 31.2891]
    };
    var chinaDatas = [
      [{
        name: '黑龙江',
        value: 0
      }], [{
        name: '内蒙古',
        value: 0
      }], [{
        name: '吉林',
        value: 0
      }], [{
        name: '辽宁',
        value: 0
      }], [{
        name: '河北',
        value: 0
      }], [{
        name: '天津',
        value: 0
      }], [{
        name: '山西',
        value: 0
      }], [{
        name: '陕西',
        value: 0
      }], [{
        name: '甘肃',
        value: 0
      }], [{
        name: '宁夏',
        value: 0
      }], [{
        name: '青海',
        value: 0
      }], [{
        name: '新疆',
        value: 0
      }], [{
        name: '西藏',
        value: 0
      }], [{
        name: '四川',
        value: 0
      }], [{
        name: '重庆',
        value: 0
      }], [{
        name: '山东',
        value: 0
      }], [{
        name: '河南',
        value: 0
      }], [{
        name: '江苏',
        value: 0
      }], [{
        name: '安徽',
        value: 0
      }], [{
        name: '湖北',
        value: 0
      }], [{
        name: '浙江',
        value: 0
      }], [{
        name: '福建',
        value: 0
      }], [{
        name: '江西',
        value: 0
      }], [{
        name: '湖南',
        value: 0
      }], [{
        name: '贵州',
        value: 0
      }], [{
        name: '广西',
        value: 0
      }], [{
        name: '海南',
        value: 0
      }], [{
        name: '上海',
        value: 1
      }]
    ];
  
    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = chinaGeoCoordMap[dataItem[0].name];
        var toCoord = [116.4551, 40.2539];
        if (fromCoord && toCoord) {
          res.push([{
            coord: fromCoord,
            value: dataItem[0].value
          }, {
            coord: toCoord,
          }]);
        }
      }
      return res;
    };
    var series = [];
    [['北京市', chinaDatas]].forEach(function (item, i) {
      console.log(item)
      series.push({
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: .3 //尾迹线条曲直度
          }
        },
        data: convertData(item[1])
      }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {//圆环显示文字
              return params.data.name;
            },
            fontSize: 13
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 5 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#f00'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          };
        }),
      },
        //被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              //offset:[5, 0],
              color: '#0f0',
              formatter: '{b}',
              textStyle: {
                color: "#0f0"
              }
            },
            emphasis: {
              show: true,
              color: "#f60"
            }
          },
          symbol: 'pin',
          symbolSize: 50,
          data: [{
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10]),
          }],
        }
      );
    });
  
    // 
    let option = {
      // 标题
      title: {
        // left: 'center',
        text: '来京路线 From',
        textStyle: {
          color: '#6d767e'
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = "";
          var name = params.name;
          var value = params.value[params.seriesIndex + 1];
          res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
          return res;
        }
      },
      backgroundColor: "#fff",
      visualMap: { // 图例值控制（官方叫做视觉映射组件）
        min: 0,
        max: 1,
        calculable: true,
        show: false,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'china',
        zoom: 1.2,
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: 'rgba(51, 69, 89, .5)', //地图背景色
            borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1
          },
          emphasis: {
            color: 'rgba(37, 43, 61, .5)' //悬浮背景
          }
        }
      },
      series: series
    };
  
    myChart.setOption(option);
  }
  
  mapChart();
})